<template>
  <view class="navigation flex">
    <!-- 左侧一级分类列表 -->
    <scroll-view
      class="left-class-left flex-shrink-0"
      scroll-y
      :scroll-top="primaryScrollTop"
      scroll-with-animation
    >
      <view
        class="left-class-left-item"
        v-for="(item, index) in list"
        :key="index"
      >
        <view
          :class="currentIndex === index ? 'select-class-item' : ''"
          @click="selectClassTap(index, true)"
          >{{ item.name }}</view
        >
      </view>
    </scroll-view>

    <!-- 右侧二级分类列表 -->
    <scroll-view
      class="right-class-list flex-1"
      scroll-with-animation
      scroll-y
      :scroll-top="scrollTop"
      @scroll="rightScroll"
    >
      <slot>
        <view
          v-for="(item, index) in list"
          :key="index"
          class="right-class-box border-box"
        >
          <view
            v-for="(variety, ind) in item.list"
            :key="ind"
            class="right-class-item flex"
          >
            <image class="right-class-item-image" :src="variety.image"></image>
            <view class="flex-1 right-class-item-content border-box">
              <view class="title text-16 color-3 font-bold">{{
                variety.title
              }}</view>
              <view class="sub-title text-12 color-6 onespace-ellipsis">{{
                variety.subTitle
              }}</view>
              <view class="inventory text-12 color-9"
                >剩余{{ variety.inventory }}份</view
              >
              <view class="options flex items-center justify-between">
                <!-- 价格 -->
                <view class="price font-bold">
                  <text class="text-11">￥</text>
                  <text class="text-16">{{ variety.price }}</text>
                </view>
                <wk-counter @change="changeCounter"></wk-counter>
              </view>
            </view>
          </view>
        </view>
      </slot>
    </scroll-view>
  </view>
</template>

<script>
import WkCounter from "@/components/wk-counter";

const listDefault = [];

for (let i = 0; i < 20; i++) {
  const list = [];
  for (let j = 0; j < 5; j++) {
    list.push({
      title: `菜品-${i}-${j}`,
      subTitle: "牛肉卷加培根卷，肉肉的叠加；牛肉卷加培根卷，肉肉的叠加",
      inventory: 30,
      price: 40.0,
      image: "/static/logo.png",
    });
  }
  listDefault.push({
    name: "类型" + i,
    list,
  });
}

export default {
  components: {
    WkCounter,
  },
  props: {
    list: {
      type: Array,
      default: () => listDefault,
      // 结构： [{name: '', list: [{title: '', subTitle: '', inventory: '', price: '', image: ''}]}, ...]
    },
  },
  data() {
    return {
      currentIndex: 0,
      // 左侧一级分类列表数据
      leftClassData: [],
      // 右侧二级分类列表数据
      rightClassData: [],
      // 右侧距离顶部距离
      scrollTop: 0,
      // 左侧每一个分类项目距离顶部的高度
      leftScrollHeight: [],
      // 右侧每一个分类项目距离顶部的高度
      rightScrollHeight: [],
      // 左侧分类项目距离顶部的距离
      primaryScrollTop: 0,
      // 滚动防抖
      scrollTimer: null,
    };
  },
  watch: {
    list: {
      immediate: true,
      handler() {
        this.getHeight();
      },
    },
  },
  methods: {
    // 数量变化
    changeCounter(type, method) {
      method[type]();
    },
    // 左侧一级分类列表的触碰事件
    selectClassTap(current, rightScroll) {
      this.currentIndex = current;
      // 判断左侧router-view是否需要滚动
      const query = uni
        .createSelectorQuery()
        // #ifndef MP-ALIPAY
        .in(this);
      // #endif
      query
        .select(".left-class-left")
        .boundingClientRect(({ height }) => {
          // 左侧滚动控制计算
          const currentScrollTop = this.leftScrollHeight.reduce(
            (t, i, index) => {
              return index < current ? t + i : t + 0;
            },
            0
          );
          this.primaryScrollTop = currentScrollTop - height / 2;
          // 点击左侧时执行 防止闪屏
          if (rightScroll) {
            // 右侧滚动控制计算
            const currentRightScrollTop = this.rightScrollHeight.reduce(
              (t, i, index) => {
                return index < current ? t + i : t + 0;
              },
              0
            );
            this.scrollTop = currentRightScrollTop;
          }
        })
        .exec();
    },
    // 右侧二级分类列表的滚动事件
    rightScroll(event) {
      this.scrollTimer && clearTimeout(this.scrollTimer);
      this.scrollTimer = setTimeout(() => {
        const { scrollTop } = event.detail;
        let current = -1;
        let rightScrollTotal = 0;
        for (let i = 0; i < this.rightScrollHeight.length; i++) {
          rightScrollTotal += this.rightScrollHeight[i];
          // 找到匹配的项并终止循环
          if (rightScrollTotal > scrollTop) {
            current = i;
            break;
          }
        }
        this.selectClassTap(current);
      }, 100);
    },
    // 获取列表的高度
    getHeight() {
      const query = uni
        .createSelectorQuery()
        // #ifndef MP-ALIPAY
        .in(this);
      // #endif
      this.$nextTick(() => {
        query
          .selectAll(".left-class-left-item")
          .boundingClientRect((data) => {
            this.leftScrollHeight = data.map((item) => item.height);
          })
          .exec();
      });
      this.$nextTick(() => {
        query
          .selectAll(".right-class-box")
          .boundingClientRect((data) => {
            this.rightScrollHeight = data.map((item) => item.height);
          })
          .exec();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
$background-color: #ffffff;
.navigation {
  height: 100%;
  background: $background-color;
}
.left-class-left {
  width: 160rpx;
  color: $smt-color-3;
  background: #f9f9f9;
  .left-class-left-item {
    width: 160rpx;
    text-align: center;
    font-size: 26rpx;
    .select-class-item {
      color: $smt-theme-color;
      background: $background-color;
    }
    view {
      padding: 28rpx 0;
    }
  }
}
.right-class-list {
  .right-class-item {
    padding: 20rpx;
    &-image {
      width: 180rpx;
      height: 180rpx;
      border-radius: 10rpx;
      overflow: hidden;
    }
    &-content {
      width: 0;
      padding-left: 30rpx;
      padding-right: 10rpx;
      > view {
        margin-bottom: 8rpx;
      }
      .title {
        line-height: 44rpx;
      }
      .sub-title {
        line-height: 34rpx;
      }
      .options {
        height: 44rpx;
        .price {
          color: #ff3f21;
        }
      }
    }
  }
}
</style>
